<template>
  <div id="page-index">
    <div class="container">
      <div class="popup" v-show="panel">  
        <div>  
          <img id="image" :src="imgurl" alt="Picture">  
        </div>  
    
        <button type="button" id="button" @click="crop">确定</button>  
            
      </div>  

       <div class="title">
		    <img :src="upimg" v-if="hasimg" class="cutimg">
        <p v-if="!hasimg">上传照片</p>
		    <input @change="change" class="input-img" type="file" name="addImg" id="addImg" value="" accept="image/*"/>
      </div>
      <div class="section">
        <div class="section-main">
            <p class="toname">{{toname}}:</p>
            <p class="content">
              <textarea name="" id="" rows="5" v-model="content"></textarea>
            </p>
            <p class="fromname">
              <input type="text" v-model="fromname">
            </p>
            <p class="word">
              <span @click="getLuckWord">随机祝福语</span>
            </p>
        </div>
        <div class="section-bottom">
          <div class="small-san left"></div>
          <div class="small-san right"></div>
          <div class="big-san left"></div>
          <div class="big-san right"></div>

        </div>
      </div>
      <div class="foot" @click="showCard">预览贺卡</div>
    </div>
    
  </div>
</template>

<script>
import luckWork from '../../static/js/luck.js'
import Cropper from 'cropperjs'
import '../../static/plug/cropper/cropper.css'
import {Toast} from 'mint-ui';
export default {
  name: 'make',
  data () {
    return {
      panel:false, 
      cropper:'', 
      picValue:'',
      imgurl:'',
      img:'',
      croppable:false, 

      hasimg:false,
      upimg:'',
      toname:'妈妈',
      fromname:decodeURIComponent(this.$store.state.username),
      content:'123123123123',

      cid:'',
    }
  },
  methods:{
    showCard(){
      if(!this.hasimg){
        Toast('请上传图片！')
        return false
      }
      var cardInfo={
        fromname:this.fromname,
        toname:this.toname,
        content:this.content,
        // imgurl:this.imgurl
        imgurl:this.upimg
      }
      this.$store.commit('saveCardInfo',cardInfo)
      this.$router.replace({path:'/show'})
    },
    getLuckWord(){
      var index=Math.ceil(Math.random()*100)
      var max_length=luckWork.length
      index=index%max_length
      this.content=luckWork[index]['luck']
    },
    getObjectURL (file) {  
      var url = null ;   
      if (window.createObjectURL!=undefined) { // basic  
        url = window.createObjectURL(file) ;  
      } else if (window.URL!=undefined) { // mozilla(firefox)  
        url = window.URL.createObjectURL(file) ;  
      } else if (window.webkitURL!=undefined) { // webkit or chrome  
        url = window.webkitURL.createObjectURL(file) ;  
      }  
      return url ;  
    },  
    change(e){
        let files = e.target.files || e.dataTransfer.files;  
        if (!files.length) return;  
        this.panel = true;  
        this.picValue = files[0];  
          
        this.imgurl = this.getObjectURL(this.picValue); 
        //每次替换图片要重新得到新的url  
        if(this.cropper){  
          this.cropper.replace(this.imgurl);  
        }  
        this.panel = true;  
        e.target.value='';
    },
    crop () {  
        this.panel = false;  
        var croppedCanvas;  
        console.log(this.croppable)
        if (!this.croppable) {  
          return;  
        }  
        // Crop(原本的图形)
        croppedCanvas = this.cropper.getCroppedCanvas();  
        // Round(裁剪成圆形)
        // var roundedCanvas;  
        // roundedCanvas = this.getRoundedCanvas(croppedCanvas);  
        this.upimg = croppedCanvas.toDataURL(); 
        this.hasimg=true
    }, 
    getRoundedCanvas (sourceCanvas) {  
      var canvas = document.createElement('canvas');  
      var context = canvas.getContext('2d');  
      var width = sourceCanvas.width;  
      var height = sourceCanvas.height;  
      canvas.width = width;  
      canvas.height = height;  
      context.imageSmoothingEnabled = true;  
      context.drawImage(sourceCanvas, 0, 0, width, height);  
      context.globalCompositeOperation = 'destination-in';  
      context.beginPath();  
      context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);  
      context.fill();  
      return canvas;  
    },  
    getOldData(cid){
      var _this=this
      this.$http.get(_this.httpurl('share/shareTextCard'),{params:{id:cid}})
      .then((res)=>{
        var data=res.data
        // this.hasimg=true
        // this.upimg=this.httpToBase64Url(this.httpurl(data.updatepic))
        this.toname=data.sendto
        this.fromname=data.sendfrom
        this.content=data.cardcontent
        console.log(this.upimg)
      })
    }
  },
  created(){
    this.cid=this.$route.query.cid
  },
  mounted(){
    if(this.cid){
      this.getOldData(this.cid)
    }
    var self=this
    this.getLuckWord()
    var image = document.getElementById('image');  
    this.cropper = new Cropper(image, {  
      aspectRatio: 2/1, 
      viewMode: 1,  
      background:false,  
      zoomable:false,  
      ready: function () {
        self.croppable = true;  
      }  
    });  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
img{font-size: 0px}
.container{
  width:100vw;
  height: 100vh;
}
.title{
  position: relative;
  height: 16%;
  width:100%;
  background: #cc0000;
  text-align: center;
  z-index: 0
}
.title::before{
  content:'';
  background: url('/mother/static/img/make_title1.png') no-repeat center;
  background-size: cover;
  height:40vh;
  width:40%;
  position: absolute;
  z-index: -1;
  left:0;
  top:10%;
}
.title::after{
  content:'';
  background-size: cover;
  height:15vh;
  width:25%;
  position: absolute;
  z-index: -1;
  right:0;
  top:40%;

}
.title p{
  font-size: 24px;
  color:#fff;
  padding-top: 10%;
}
.input-img{
  position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0;
}
.cutimg{
  height:80%;
  width: auto;
  margin-top: 10px;

}
.section{

}
.section-bottom{
  font-size: 0;
  width: 100%;
  position: fixed;
  bottom:8%;
}
.small-san{
  font-size: 0;
  width: 0;
  height: 0;
  border:10vw solid transparent;
  position: absolute;
  top:-66vw;
}
.big-san.left{
  font-size: 0;
  width: 0;
  height: 0;
  border-bottom: 56vw solid #cc0000; 
  border-right: 56vw solid transparent; 
  top:-56vw;
  position: absolute;
  left:0;
}
.big-san.right{
  font-size: 0;
  width: 0;
  height: 0;
  border-bottom: 56vw solid #cc0000; 
  border-left: 56vw solid transparent; 
  top:-56vw;
  right:0;
  position: absolute
}
.small-san.left{
  border-right: 10vw solid #660000; 
  left: -10.3vw;
}
.small-san.right{
  border-left: 10vw solid #660000; 
  right:-10.3vw
}
.section-bottom img{
  width: 100%
}
.section-main{
  width:81vw;
  background: #ffffcc;
  height: 64vh;
  margin: 11vh 9.5vw 0;
  position: relative;
  padding: 20px 20px;
  box-sizing: border-box;
}
.section-main::after{
  content:'';
  background: url('/mother/static/img/make_section3.png') no-repeat center;
  background-size: cover;
  height:26vh;
  width:18vh;
  position: absolute;
  left:20%;
  bottom:5%;
}
.section-main::before{
  content:'';
  font-size: 0;
  width: 0;
  height: 0;
  border-bottom: 12vw solid #cc0000; 
  border-right: 12vw solid #fff; 
  position: absolute;
  right: 0;
  top:0;
}
.section-main .toname{
  color: #cc6666;
  font-size:18px;
  line-height: 2.5em
}
.section-main .content{
}
.section-main .content textarea{
  width: 90%;
  background: #fff;
  padding: 5%;
}
.section-main .fromname{
  text-align: right;
  font-size: 18px;
}
.section-main .fromname input{
  text-align: right;
  width: 6em
}
.section-main .word{
  z-index:20;
  position: relative;
  
}
.section-main .word span{
  background: #cc0000;
  padding:3px 5px;
  color: #fff;
  font-size: .8rem;
}





.foot{
  position: fixed;
  bottom:0;
  width: 100%;
  background-color: #ffff99;
  text-align: center;
  color: #cc0000;
  height: 10%;
  line-height: 10vh;
  font-size: 24px;
  box-sizing:border-box;
  z-index:9;
}




.popup {  
    z-index: 99;  
    position: fixed;  
    padding-top: 60px;  
    left: 0;  
    top: 0;  
    right: 0;  
    bottom: 0;  
    background:rgba(0,0,0,1);  
}  
  
#image {  
  max-width: 100%;  
}
#button {  
  position: absolute;  
  right: 10px;  
  top: 10px;  
  width: 80px;  
  height: 40px;  
  border:none;  
  border-radius: 5px;  
  background:white;  
}   
  
.cropper-view-box,.cropper-face {  
  border-radius: 50%;  
}  






</style>
